<nav class="navbar navbar-default navbar-fixed-top e2email-header">
  <div class="container">
    <button ng-click="threadsCtrl.showCompose(true)" ng-hide="threadsCtrl.compose.show" class="col-xs-4 btn btn-primary btn-focus fade-show composebtn">{{'compose'| translate}}</button>

    <div class="dropdown pull-right" ng-class="{open: threadsCtrl.showDropdown}" outerclick="threadsCtrl.showDropdown=false">
      <button tabindex="-1" ng-click="threadsCtrl.showDropdown=!threadsCtrl.showDropdown" class="btn btn-blank btn-focus dropdown-toggle" aria-label="{{'more' | translate}}" aria-haspopup="true" style="font-size: 2.2em; line-height: 1em; font-weight: bold; padding: 0px">&#8942;</button>
      <ul class="dropdown-menu" role="menu">
        <li role="menuitem"><a tabindex="-1" ng-click="threadsCtrl.showSettings()">{{'settings' | translate}}</a></li>
        <li role="menuitem"><a tabindex="-1" ng-click="threadsCtrl.showFAQ()">{{'faq' | translate}}</a></li>
        <li role="menuitem"><a tabindex="-1" ng-click="threadsCtrl.showIssues()">{{'issues' | translate}}</a></li>
      </ul>
    </div>

    <div class="header-icon-container btn-focus pull-right col-xs-2" title="{{'refresh' | translate}}" ng-click="threadsCtrl.refresh()">
      <div>
        <svg
        ng-class="{spinning: threadsCtrl.inRefresh, 'header-icon clickable': !threadsCtrl.inRefresh}"
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:svg="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="1 1 22 22"
        style="margin-top: 6px">
        <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
      </svg>
    </div>
  </div>

  <div class="header-icon-container btn-focus pull-right col-xs-2 fade-show" title="{{'trashHelp' | translate}}" ng-show="threadsCtrl.showTrash" ng-click="threadsCtrl.trashMarkedThreads()">
    <svg class="header-icon"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="1 1 22 22"
    style="margin-top: 6px">
    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
  </svg>
</div>

</div>
</nav>

<div class="e2email-content-start">
  <form class="email-main-compose-form fade-show" ng-show="threadsCtrl.compose.show" ng-submit="threadsCtrl.sendCompose()">
    <autocomplete ac-hint="To" ng-model="threadsCtrl.compose.recipient" ac-done="threadsCtrl.validateRecipient()"></autocomplete>
    <div class="container email-main-recipient-missing fade-show" ng-show="threadsCtrl.compose.missingRecipient">
      <div>{{['missingRecipientAlert', threadsCtrl.compose.missingRecipient] | translate}}</div>
      <a ng-disabled="threadsCtrl.inviteInProgress" ng-click="threadsCtrl.inviteMissingRecipient()" class="col-xs-3 btn btn-primary btn-focus pull-right">{{threadsCtrl.inviteMissingRecipientTitle | translate}}</a>
      <a ng-disabled="threadsCtrl.inviteInProgress" ng-click="threadsCtrl.cancelRecipient()" class="btn btn-link btn-focus pull-right">Cancel</a>
    </div>
    <div class="container email-main-recipient-invalid fade-show" ng-show="threadsCtrl.compose.invalidRecipient">
      <div>{{['invalidRecipientAlert', threadsCtrl.compose.invalidRecipient] | translate}}</div>
      <a ng-click="threadsCtrl.cancelRecipient()" class="btn btn-link btn-focus pull-right">Close</a>
    </div>

    <input tabindex="2" type="text" class="form-control ac-tabbable email-main-subject-input" placeholder="Subject" required="required" ng-hide="threadsCtrl.compose.missingRecipient" ng-model="threadsCtrl.compose.subject" ng-keypress="threadsCtrl.onSubjectKeyPress($event)"/>
    <div class="compose-content">
    <div tabindex="3" id="textareaSpace">
      <textarea id="textareaElement" class="form-control email-main-compose-textarea" placeholder="{{threadsCtrl.compose.validRecipient ? 'typeMessagePlaceholder' : 'invalidRecipientPlaceholder' | translate}}" rows="10" ng-disabled="!threadsCtrl.compose.validRecipient" ng-model="threadsCtrl.compose.message" ng-hide="threadsCtrl.compose.missingRecipient" required="required">
      </textarea> </div>
      <div id="attachmentRepeat">
      <div ng-repeat="x in threadsCtrl.compose.attachments" class="single-attachment"><span id="attachName">{{ x.filename | limitTo: 20 }}{{x.filename.length > 20 ? '...' : ''}} </span> <span id="attachSize"> {{'(' + x.size + ')'}} </span> <span style="width:10%;">
        <button ng-click="threadsCtrl.removeObj($index)" class="removeAttachment"> x </button> </span></div>
      </div>
      </div>
  <div class="row email-main-compose-form-button-row">
    <div class="col-xs-12">
      <button tabindex="4" type="submit" class="col-xs-3 btn btn-primary btn-focus sidebtn">{{'send' | translate}}</button>
      <button tabindex="5" ng-click="threadsCtrl.showCompose(false)" class="btn btn-link btn-focus sidebtn pull-left">{{'cancel' | translate}}</button>
        <span tabindex="6" class="attach-img" as-upload="threadsCtrl.onFileUpload(name, type, contents, size)">
          <svg class="attach-icon" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#757575">
            <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/>
            <path d="M0 0h24v24H0z" fill="none"/>
          </svg>
        </span>
    </div>
  </div>
  </form>

<ul class="list-unstyled">
  <li class="email-subject-entry btn-focus" ng-repeat="thread in threadsCtrl.threads|orderBy:'-updated'"  ng-click="threadsCtrl.showMessages(thread.id)">
    <div class="row">
      <label class="thread-select-label col-xs-1" ng-click="threadsCtrl.toggleMarkedThread($event, thread)"><input aria-label="{{'selectThreadTitle' | translate}}" type="checkbox" ng-model="thread.isMarked"/></label>
      <div class="col-xs-11">
        <div class="row">
          <div class="col-xs-9 email-subject-from text-muted">
            <userlist ul-members="thread.participants"></userlist>
            <span ng-bind="thread.mails.length > 1 ? '(' + thread.mails.length + ')' : ''"></span>
          </div>
          <div class="col-xs-3 text-right email-subject-date text-muted">{{thread.updated | relativedate}}</div>
        </div>
        <div class="row">
          <div class="col-xs-11 email-subject-title" ng-class="{bold: thread.unread}">{{thread.subject}}</div>
        </div class="row">
        <div class="row">
          <div class="col-xs-11 email-subject-tease text-muted"><span class="glyphicon glyphicon-lock" ng-show="thread.snippet==='...'"></span>{{thread.snippet}}</div>
        </div>
      </div>
    </div>
    <hr class="email-hr"/>
  </li>
</ul>

<div class="row">
  <div class="col-xs-12" style="padding-top: 1em">
    <span class="text-info">{{threadsCtrl.status}}</span>
  </div>
</div>

<div class="fade-show email-no-threads text-muted" ng-show="!threadsCtrl.threads.length && !threadsCtrl.status">
  {{'noThreadsMessage' | translate}}
</div>

</div>
